<template>
  <div class="fenxiang-mengban" v-if="isFX">
    <div class="fenxiang">
      <ul>
        <li>
          <ul class="fenxiang-list">
            <li>
              <div>
                <img src="../../assets/img/shouye/fenxiang/pengyouquan.png"/>
              </div>
              <p>微信朋友圈</p>
            </li>
            <li>
              <div>
                <img src="../../assets/img/shouye/fenxiang/weixin.png" /></div>
              <p>微信好友</p>
            </li>
            <li>
              <div>
                <img src="../../assets/img/shouye/fenxiang/QQ.png"/></div>
              <p>QQ好友</p>
            </li>
          </ul>
        </li>
        <li>
          <ul class="fenxiang-list">
            <li>
              <div>
                <img src="../../assets/img/shouye/fenxiang/QQkongjian.png"/></div>
              <p>QQ空间</p>
            </li>
            <li>
              <div>
                <img src="../../assets/img/shouye/fenxiang/weibo.png" /></div>
              <p>微博</p>
            </li>
            <li>
              <div>
                <img src="../../assets/img/shouye/fenxiang/fuzhilianjie.png"/></div>
              <p>复制链接</p>
            </li>
          </ul>
        </li>
      </ul>
      <div @click="quxiao()">
        取消
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        isFX: false
      }
    },
    methods: {
      quxiao () {
        this.isFX = false
      }
    }
  }
</script>
<style scoped>
  .fenxiang-mengban {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    background: rgba(0,0,0,0.5);
  }
  .fenxiang {
    padding-top: 1rem;
    background: #fff;
    width: 100%;
    height: 10rem;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .fenxiang-list {
    display: flex;
  }
  .fenxiang-list li {
    flex: 1;
    text-align: center;
  }
  .fenxiang-list div {
    width: 1.5rem;
    height: 1.5rem;
    margin: 0.5rem auto;
  }
  .fenxiang-list div img {
    width: 100%;
  }
  .fenxiang-list p {
    font-size: 0.6rem;
    font-weight: normal;
    font-stretch: normal;
    color: #4d4d4d;
  }
  .fenxiang>div {
    font-size: 0.6rem;
    font-weight: normal;
    font-stretch: normal;
    background: #e53e42;
    color: #fff;
    width: 3rem;
    text-align: center;
    padding: 0.2rem;
    border-radius: 0.2rem;
    margin: 0.5rem auto;
  }
</style>
